{% extends 'demo/base.html' %}
{% load common_extras %}
{% load static %}
{% block title %}
    创造中心
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/demo/nav.css' %}">
    <link rel="stylesheet" href="{% static 'css/demo/user_article.css' %}">
{% endblock %}
{% block header %}
    {% include 'demo/header.html' %}
{% endblock %}
{% block main %}
    {% if articles %}
        <ul class="nav">
        {% for article in pages %}
            <li>
                <a href="/demo/article/{{ article.id }}">
                    <div class="left">
                        <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                        <p>{{ article.desc }}</p>
                        <p class="time-info">发布时间：{{ article.create_time|time_since }}</p>
                    </div>
                    <div class="right">
                        <img src="/static/media/{{ article.cover }}/" alt="">
                    </div>
                </a>
            <div class="func">
                <a href="/demo/article/update/{{ article.id }}">修改</a>
                <a href="/demo/article/delete/{{ article.id }}">删除</a>
            </div>
            </li>
        {% endfor %}
        <div class="bottom-info">
            {% if pages.has_previous %}
                <a href="{% url 'ArticleUser' %}?page={{ pages.previous_page_number }}">上一页</a>
            {% endif %}
            {% for page in pages.paginator.page_range %}
                {% if page == pages.number %}
                    <a href="{% url 'ArticleUser' %}?page={{ page }}"
                       style="border-bottom: 2px solid cornflowerblue">{{ page }}</a>
                {% else %}
                    <a href="{% url 'ArticleUser' %}?page={{ page }}">{{ page }}</a>
                {% endif %}

            {% endfor %}
            {% if pages.has_next %}
                <a href="{% url 'ArticleUser' %}?page={{ pages.next_page_number}}">下一页</a>
            {% endif %}
            {% if not pages.has_next %}
                <p>文章已经是最后一篇了</p>

            {% endif %}

        </div>
    {% endif %}
</ul>

{% endblock %}
